
<!--conf
<sample>
              <product version="2.6" edition="std"/>
                     <modifications>
                            <modified date="100609"/>
                     </modifications>
               </sample>
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Custom Axis Units</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
    
    <script src="../common/testdata.js"></script>
</head>
<body>
<div id="chart1" style="width:800px;height:250px;border:1px solid #A4BED4;"></div>


<script>
    var data = [
        { id:1, sales:20, date:"25.01.2012", color: "#ee4339"},
        { id:2, sales:55, date:"05.01.2012", color: "#ee9336"},
        { id:3, sales:40, date:"15.02.2012", color: "#eed236"},
        { id:4, sales:78, date:"10.01.2012", color: "#d3ee36"},
        { id:5, sales:61, date:"25.02.2012", color: "#a7ee70"},
        { id:6, sales:35, date:"20.02.2012", color: "#58dccd"},
        { id:7, sales:80, date:"12.01.2012", color: "#36abee"},
        { id:8, sales:50, date:"09.01.2012", color: "#476cee"},
        { id:9, sales:65, date:"10.02.2012", color: "#a244ea"},
        { id:10, sales:59, date:"20.01.2012", color: "#e33fc7"},
        { id:11, sales:86, date:"11.01.2013", color: "#e33fc7"}
    ];
    var barChart1 =  new dhtmlXChart({
        view:"area",
        container:"chart1",
        value:"#sales#",
        color: "#58dccd",
        tooltip:{
            template:"#sales#"
        },
        alpha:0.7,
        width:60,
        tooltip:{
            template:"#sales#"
        },
        xAxis:{
            template:function(obj){
                return obj.$unit.getDate()==15?dhtmlx.Date.date_to_str("%F")(obj.$unit):""
            },
            lineColor:function(obj){
                return obj.$unit.getDate()==1?"#737373":"#cfcfcf"
            },
            value:function(obj){
                return dhtmlx.Date.str_to_date("%d.%m.%Y")(obj.date);
            },
            units:{
                start:new Date(2012,0,1),
                end:new Date(2012,2,1),
                next:function(d){
                    return  dhtmlx.Date.add(d, 1, "day");
                }
            }
        },
        yAxis:{
            start:0,
            step:10,
            end:100
        }
    });


    barChart1.parse(data,"json");


</script>
</body>
</html>